import { Suspense } from "react";
import { notFound } from "next/navigation";
import { getLayoutConfiguration } from "@/app/actions/layout-configurations";
import { LayoutConfigurationDetail } from "@/app/components/layout-configurations/LayoutConfigurationDetail";
import { Skeleton } from "@/components/ui/skeleton";

interface PageProps {
  params: Promise<{
    id: string;
  }>;
}

export default async function LayoutConfigurationDetailPage({ params }: PageProps) {
  const p = await params;
  const id = parseInt(p.id);

  if (isNaN(id)) {
    notFound();
  }

  const result = await getLayoutConfiguration(id);

  if (!result.success || !result.data) {
    notFound();
  }

  const configuration = result.data;

  return (
    <div className="container mx-auto py-8 px-4">
      <div className="mb-6">
        <h1 className="text-3xl font-bold">{configuration.name}</h1>
        <p className="text-muted-foreground">
          Created: {new Date(configuration.createdAt).toLocaleDateString()}
        </p>
      </div>

      <Suspense fallback={<LayoutConfigurationDetailSkeleton />}>
        <LayoutConfigurationDetail configuration={{
          ...configuration,
          createdAt: configuration.createdAt,
          updatedAt: configuration.updatedAt,
          sections: configuration.sections.map((section: any) => ({
            ...section,
            startingRow: section.startingRow ?? undefined,
            endingRow: section.endingRow ?? undefined,
            fields: section.fields.map((field: any) => ({
              ...field,
              dataTypeFormat: field.dataTypeFormat ?? null
            }))
          }))
        }} />
      </Suspense>
    </div>
  );
}

function LayoutConfigurationDetailSkeleton() {
  return (
    <div className="space-y-6">
      <Skeleton className="h-8 w-64" />
      <Skeleton className="h-4 w-32" />
      <Skeleton className="h-32 w-full" />
    </div>
  );
}